<template>
  <div>
    <h2>hello2组件</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="btnClickInc">+</button>
    <button @click="btnClickDec">-</button>
    <button @click="btnClickIncN(10)">+10</button>
    <button @click="btnClickIncN(5)">+5</button>

    <button @click="otherClick(5)">+5其他提交</button>

    <h2>显示学生:</h2>
    <h2>{{$store.state.studens}}</h2>
    <button @click="addStudent">添加一个学生</button>
    <button @click="deleteStudent">删除一个学生</button>
  </div>

</template>

<script>
export default {
  name: "Hello2",
  methods: {
    /**
     *这种直接操作方式不太好 ，因为官方是不让这么直接操作的
     * $store.state.counter--
     *
     * commit 提交到mutations 或者  dispatch 分发 到actions 里 然后在commit
     *
     * 区别是  dispatch 分发处理网络异步请求
     * mutations记录的是同步状态 结合浏览器插件devlop 可以查看vuex的相关状态
     *
     */
    btnClickInc(){
      this.$store.commit("inc")
    },
    btnClickDec(){
      this.$store.commit("dec")
    },
    btnClickIncN(n){
      this.$store.commit("incN",n)
    },
    //其他方式的commit 提交
    otherClick(n){
      this.$store.commit({
        type: 'otherClick',
        n: n
      })
    },
    addStudent(){
      this.$store.commit("addStudent",{id:10,name:'科比',age:38})
    },
    deleteStudent(){
      this.$store.commit("deleteStudent")
    }
  }
}
</script>

<style scoped>

</style>
